<template>
  <div class="teachIns">
    <div class="modelTitle">基本信息</div>
    <el-form ref="cmpForm" label-width="150px" label-position="left" style="padding-left: 40px; width: 80%; marginBottom: 40px;">
      <el-form-item label="发起企业">
        <span>{{ companyName }}</span>
        <!-- <el-button style="margin-left: 50px" type="primary">查看企业</el-button> -->
      </el-form-item>
      <el-form-item label="宣讲会名称">
        <span>{{ teachInDetail.name }}</span>
      </el-form-item>
      <el-form-item label="宣讲会照片">
        <div class="imageList">
          <div v-for="(item, index) of teachInDetail.images" :key="index" class="cmpImg">
            <img :src="item.image">
          </div>
        </div>
      </el-form-item>
      <el-form-item label="宣讲会说明">
        <Tinymce v-if="teachInDetail.audit_status == 3" ref="editor" v-model="auditParams.description" style="width: 100%" :height="50" :value="auditParams.audit_remark" />
        <div v-else v-html="teachInDetail.description" />
      </el-form-item>
      <el-form-item label="企业预期时间">
        <span>{{ teachInDetail.pre_start_date + '——' + teachInDetail.pre_end_date }}</span>
      </el-form-item>
      <el-form-item v-if="teachInDetail.audit_status == 3" label="安排时间和地点">
        <el-date-picker
          v-model="schedule"
          style="marginBottom: 30px;"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
        />
        <el-input v-model="auditParams.address" placeholder="必填，请输入安排的地点" />
      </el-form-item>
      <el-form-item v-else-if="teachInDetail.audit_status == 2" label="安排时间和地点" />
      <el-form-item v-else label="安排时间和地点">
        <div>{{ teachInDetail.start_at + '——' + teachInDetail.end_at }}</div>
        <div>{{ teachInDetail.address }}</div>
      </el-form-item>

      <el-form-item label="联系人">
        <el-input v-if="teachInDetail.audit_status == 3" v-model="auditParams.contact_name" :maxlength="5" placeholder="必填，请输入少于5个中文字" />
        <span v-else>{{ auditParams.contact_name }}</span>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-if="teachInDetail.audit_status == 3" v-model="auditParams.contact_phone" :maxlength="20" placeholder="必填，请输入少于20个数字和字符" />
        <span v-else>{{ auditParams.contact_phone }}</span>
      </el-form-item>
    </el-form>
    <el-row v-if="teachInDetail.audit_status == 3" style="margin-left: 40px;">
      <el-button type="primary" @click="handlePassAudit">通过</el-button>
      <el-button @click="showRefuseDialog">拒绝</el-button>
      <el-button @click="goBackList">返回上一页</el-button>
    </el-row>
    <el-row v-else style="margin-left: 40px;">
      <el-button @click="goBackList">返回上一页</el-button>
    </el-row>
    <TipDialog :dialogshow="refuseDialog" tiptitle="提示：是否确认拒绝该企业申请" :chogroup="refuseList" @handlecancel="handleDialogCancel" @handlepass="handlePassRefuse" />
  </div>
</template>

<script>
import { getSeminars, putSeminars } from '../../api/teachIn'
import Tinymce from '@/new_components/Tinymce'
import TipDialog from '@/new_components/tipDialog'
export default {
  components: {
    Tinymce,
    TipDialog
  },
  data() {
    return {
      nowDate: new Date(),
      meetingStutas: null,
      companyId: null, // 企业ID
      companyName: '', // 企业名称
      teachInDetail: {},
      auditParams: {
        contact_name: null, // 联系人
        contact_phone: null, // 联系电话
        audit_status: null, // 审核状态
        audit_remark: null, // 审核备注
        description: '', // 宣讲会说明
        start_at: null, // 开始时间
        end_at: null, // 结束时间
        address: null // 地点
      },
      refuseDialog: false,
      refuseList: ['行业不符合', '资质不符合', '企业联系不上', '其他'],
      schedule: [] // 安排的时间集合
    }
  },
  mounted() {
    this.companyId = this.$route.query.id
    this.getTeachInDetail(this.companyId)
  },
  methods: {
    // 返回上一步
    goBackList() {
      this.$router.push({ path: './list' })
    },
    // 获取当前宣讲会信息
    getTeachInDetail(id) {
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getSeminars(id).then(res => {
        this.teachInDetail = res
        this.companyName = res.company.name
        this.auditParams.contact_name = res.contact_name
        this.auditParams.contact_phone = res.contact_phone
        this.auditParams.description = res.description

        // 判断当前状态
        const ASDate = new Date(Date.parse(res.start_at))
        const AEDate = new Date(Date.parse(res.end_at))
        if (this.nowDate < ASDate) {
          this.meetingStutas = '会议开始之前'
        } else if (ASDate <= this.nowDate && AEDate >= this.nowDate) {
          this.meetingStutas = '会议进行中'
        } else {
          this.meetingStutas = '会议已结束'
        }
      }).finally(() => {
        loading.close()
      })
    },
    // 通过审核
    handlePassAudit() {
      this.$confirm('是否通过审核', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.auditParams.audit_status = 1
        this.isPutSeminars()
      }).catch(() => {
      })
    },
    showRefuseDialog() {
      this.refuseDialog = true
    },
    // 确认拒绝
    handlePassRefuse(data) {
      this.refuseDialog = false
      this.auditParams.audit_remark = data
      this.auditParams.audit_status = 2
      // this.isPutSeminars()
      // this.auditParams.start_at = this.schedule[0]
      // this.auditParams.end_at = this.schedule[1]
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      putSeminars(this.companyId, this.auditParams).then(res => {
        this.$message({
          type: 'warning',
          message: '您已拒绝该宣讲会~'
        })
        this.$router.push({ path: './list' })
      }).finally(() => {
        loading.close()
      })
    },
    handleDialogCancel() {
      this.refuseDialog = false
      this.auditParams.audit_remark = ''
    },
    // 是否审核通过
    isPutSeminars() {
      if (this.schedule.length === 0) {
        this.$message({
          type: 'error',
          message: '请安排宣讲会的起止时间'
        })
      } else if (!this.auditParams.address || this.auditParams.address === '') {
        this.$message({
          type: 'error',
          message: '请输入安排的地点'
        })
      } else if (!this.auditParams.contact_name || this.auditParams.contact_name === '') {
        this.$message({
          type: 'error',
          message: '请输入联系人姓名'
        })
      } else if (!this.auditParams.contact_phone || this.auditParams.contact_phone === '') {
        this.$message({
          type: 'error',
          message: '请输入联系人电话'
        })
      } else {
        this.auditParams.start_at = this.schedule[0] + ''
        this.auditParams.end_at = this.schedule[1] + ''
        const loading = this.$loading({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        putSeminars(this.companyId, this.auditParams).then(res => {
          this.$message({
            type: 'success',
            message: '审核通过'
          })
          this.$router.push({ path: './list' })
        }).finally(() => {
          loading.close()
        })
      }
    }
  }
}
</script>

<style lang="scss">
  p, h1, h2, h3, h4, h5 {
    margin: 0;
  }
  .teachIns {
    padding: 30px;
    .modelTitle {
      color: #222;
      font-weight: bold;
      font-size: 18px;
      margin-bottom: 10px;
    }
    .licenseImg {
      width: 240px;
      height: 360px;
    }
    .imageList {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      .cmpImg {
        width: 300px;
        height: 200px;
        margin-right: 20px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .el-button:focus, .el-button:hover {
    color: #0C66FF;
    border-color: #0C66FF;
    background-color: #fff;
  }
  .el-button--primary {
    color: #FFF;
    background-color: #0C66FF;
    border-color: #0C66FF;
  }
  .el-button--small {
    border-radius: 8px;
  }
  .el-button--primary:hover {
    color: #fff;
    background-color: #0951CC;
    border-color: #0951CC;
  }
</style>
